<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>数字345</h1>
    <button id="btn">计算</button>
    <br>
    他的百位是<input id="bai" type="text">
    <br>
    他的十位是<input id="shi" type="text">
    <br>
    他的个位是<input id="ge" type="text">
    <br>


    <script>

        // 实现一个功能
        //    1 找到相关的对象(标签)
        //       一个按钮，三个输入框

        //    2 点击一下(点谁？)
        //      逻辑处理


        // 第一步  拿到所有的相关对象

        // 获取对象的方法   document.getElementById()  get获取   element元素  by通过  id
        var oBtn = document.getElementById('btn') ;
        console.log(oBtn) ;   // 测试有没有拿到这个按钮   如果显示了按钮表示拿到了，如果显示null表示没有拿到

        var oBai = document.getElementById('bai') ;
        console.log(oBai) ;   // 测试有没有拿到这个按钮   如果显示了按钮表示拿到了，如果显示null表示没有拿到

        var oShi = document.getElementById('shi') ;
        console.log(oShi) ;   // 测试有没有拿到这个按钮   如果显示了按钮表示拿到了，如果显示null表示没有拿到

        var oGe = document.getElementById('ge') ;
        console.log(oGe) ;   // 测试有没有拿到这个按钮   如果显示了按钮表示拿到了，如果显示null表示没有拿到

        

        // 第二步  绑定点击事件   obj.onclick = function(){}
        oBtn.onclick = function() {
            // 所有的逻辑写在大括号里面
            // alert(666) ;   // 测试一下事件有没有绑定成功

            // 获取百位
            var a = (345 - 345 % 100) / 100 ;
            console.log(a) ;

            // 把a的值存入第一个输入框
            oBai.value = a ;
            // 添加样式
            oBai.style.color = 'green' ;
        }


        



    </script>

    
</body>
</html>